<template>
  <div class="home">
    <div class="box-area">
      <div class="box" v-for="(item,key) in boxList" :key="key">
        <div class="box-title">
          <i class='bx bx-icon' :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </div>
        <div class="box-num">
          <span>当日：</span>
          <span>{{ item.num }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data () {
    return {
      boxList: []
    }
  },
  mounted () {
    let $this = this
    axios.get('/api/dashboard')
      .then(function (res) {
        if (res.status === 200) {
          $this.boxList = res.data
        }
      })
      .catch(function (err) {
        console.log(err)
      })
  }
}
</script>

<style scoped>
.home {
  padding: 10px;
  box-sizing: border-box;
  border-radius: 3px;
  background-color: #fff;
  height: 100%;
}
.box-area {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.box {
  width: 32%;
  padding: 0 12px 0 24px;
  height: 120px;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 8px #ccc;
  box-shadow: 2px 2px 8px #ccc;
  box-sizing: border-box;
  color: #616161;
}
.box-title {
  margin: 10px 0;
}
.box-title .bx-icon {
  font-size: 36px;
  color: darkcyan;
  vertical-align: middle;
  margin-right: 8px;
}
.box-title span {
  font-size: 24px;
  vertical-align: middle;
  color:tomato;
}
.box-num span:nth-child(1) {
  font-size: 18px;
}
.box-num span:nth-child(2) {
  font-size: 20px;
}
</style>
